<template>
    <div id='addTimesheet'>
        <div class="title">{{title}}</div>
        <div class="content">
          <div class="title">Add Timesheet</div>
          <Form v-model="addTimesheetModel"  class="my-form add-form" :label-width="120" label-position="left">
            <Form-item label="EMPLOYEE">
              <Select v-model="employees" filterable multiple style="width: 230px">
                <Option v-for="item in allEmployeeList" :value="item.id" :key="item">
                  {{item.firstName||""}} {{item.middleName||""}} {{item.lastName||""}}
                </Option>
              </Select>
            </Form-item>
            <Form-item label="TYPE">
              <Radio-group v-model="addTimesheetModel.jobId">
                <Radio v-for="(item,key) in jobType" :key="key" :label="item.value">{{item.label}}</Radio>
              </Radio-group>
            </Form-item>

            <template v-if="addTimesheetModel.jobId == 1">
              <Form-item label="STATUS ">
                <Checkbox> Curently working</Checkbox>
              </Form-item>
              <Form-item label="TIME IN">
                <Row>
                  <i-col span="3">
                    <DatePicker> </DatePicker>
                  </i-col>
                  <i-col span="2" style="margin-left: 12px">
                    <Select> </Select>
                  </i-col>
                  <i-col span="2" style="margin-left: 12px">
                    <Select> </Select>
                  </i-col>
                </Row>
              </Form-item>
              <Form-item label="TIME OUT">
                <Row>
                  <i-col span="3">
                    <DatePicker> </DatePicker>
                  </i-col>
                  <i-col span="2" style="margin-left: 12px">
                    <Select> </Select>
                  </i-col>
                  <i-col span="2" style="margin-left: 12px">
                    <Select>

                    </Select>
                  </i-col>
                </Row>
              </Form-item>
              <Form-item label="HOURS TYPE">
                <Input style="width: 330px">
              </Form-item>
            </template>

            <template  v-if="addTimesheetModel.jobId == 2">
              <Form-item label="DATE">
                <Row>
                  <i-col span="3">
                    <DatePicker> </DatePicker>
                  </i-col>
                  <i-col span="2" style="margin-left: 12px">
                    <Select> </Select>
                  </i-col>
                  <i-col span="2" style="margin-left: 12px">
                    <Select> </Select>
                  </i-col>
                </Row>
              </Form-item>
            </template>

            <Form-item label="TOTAL HOURS">
             <Input style="width: 144px" readonly>
            </Form-item>
            <Form-item label="TIME ZONE">
              <Select style="width: 330px" >
                <Option v-for="(item,key) in timezoneList" :key="key" :value="item.timeId">
                  {{item.timezoneId}}
                </Option>
              </Select>
            </Form-item>
            <div class="btn-group">
              <Button class="default-btn" v-touch-ripple>Cancel</Button>
              <Button class="default-btn active" v-touch-ripple>Save</Button>
            </div>
          </Form>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'addTimesheet',
      created(){
        this.init();
      },
      computed:{
        timezoneList(){
          return this.$store.getters.timezoneList;
        },
        allEmployeeList(){
          return this.$store.getters.allEmployeeList;
        }
      },
      data () {
        return {
          title: 'Timesheets',
          jobType:[
            {
              label:'Time In/Out',
              value:1
            },
            {
              label:'duration',
              value:2
            },
          ],
          employees:[],
          addTimesheetModel:{
            clockinTime:null,
            clockoutTime:null,
            jobHrs:null,
            note:null,
            location:null,
            jobId:1,
            jobType:null,
            employeeId:null,
            clockDate:null,
            timeZoneId:null,
            id:null,
          }
        }
      },
      methods:{
        init(){
          this.getAllTimezone();
          this.getAllEmployeeList()
        },
        getAllTimezone(){
          this.$store.dispatch('getAllTimezone');
        },
        getAllEmployeeList(){
          this.$store.dispatch('getAllEmployeeList');
        }

      }
    }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
    @import "src/assets/css/variable.scss";

    #addTimesheet {
      >.content{
        padding: 30px 60px;
        >.title{
          font-size: 20px;
          margin-bottom: 30px;
        }
        .add-form{
          .btn-group{
            margin: 60px auto 10px auto;
            text-align: center;
            button{
              margin: 0 12px;
            }
          }
        }
      }
    }
</style>
